<template>
    <div class="app-container">
        <div slot="header" class="clearfix">
            <span>{{ title }}</span>
        </div>

        <el-form ref="form" :model="form" :rules="rules" label-width="80px">
            <el-form-item label="标题" prop="title">
                <enhanced-editor v-model="form.title" :min-height="120" :max-height="200" placeholder="请输入内容" />
            </el-form-item>
            <!-- 副标题部分 -->
            <el-form-item label="副标题">
                <div v-for="(subtitle, index) in subtitles" :key="index" class="subtitle-item">
                    <enhanced-editor v-model="form[`littleTitle${index + 1}`]" :placeholder="`请输入副标题${index + 1}`"
                        :min-height="120" :max-height="200" />
                </div>
                <el-button v-if="subtitles.length < 2" type="text" icon="el-icon-plus" @click="addSubtitle">
                    添加副标题
                </el-button>
            </el-form-item>
            <el-form-item label="文章来源" prop="articleOrigin">
                <el-autocomplete v-model="form.articleOrigin" :fetch-suggestions="querySearchSource"
                    placeholder="请输入文章来源" clearable style="width: 223px;" />
            </el-form-item>
            <el-form-item label="栏目名称" prop="columnId">
                <el-select clearable filterable v-model="form.columnId" placeholder="请选择" @change="handleColumnChange">
                    <el-option placeholder="请选择" v-for="item in columnOptions" :key="item.id" :label="item.name"
                        :value="item.id" />
                </el-select>
            </el-form-item>
            <el-form-item label="内容" prop="content">
                <editor v-model="form.content" :min-height="192" />
            </el-form-item>
            <el-form-item label="责任编辑" prop="author">
                <el-autocomplete v-model="form.author" :fetch-suggestions="querySearchAuthor" placeholder="请输入责任编辑"
                    clearable style="width: 223px;" />
            </el-form-item>
            <el-form-item label="备注" prop="remark">
                <el-input v-model="form.remark" placeholder="请输入备注" />
            </el-form-item>

            <!-- 封面路径 - 只有媒体聚焦栏目才显示 -->
            <el-form-item label="封面路径" prop="coverPath" v-if="isMediaFocusColumn">
                <el-upload ref="upload" :file-list="fileList" :before-upload="beforeUpload"
                    :on-change="handleFileChange" :auto-upload="false" :on-remove="handleRemove" :limit="1"
                    list-type="picture-card" accept="image/*" action="#" :http-request="handleHttpRequest">
                    <i class="el-icon-plus"></i>
                    <div slot="tip" class="el-upload__tip">请上传封面图片，大小不小于1MB</div>
                </el-upload>
            </el-form-item>

            <el-form-item label="审批表" prop="appval">
                <el-upload ref="appvalUpload" :file-list="appvalFileList" :before-upload="beforeAppvalUpload"
                    :on-change="handleAppvalFileChange" :auto-upload="false" :on-remove="handleAppvalRemove" :limit="1"
                    list-type="picture-card" accept="image/*" action="#" :http-request="handleAppvalHttpRequest">
                    <i class="el-icon-plus"></i>
                    <div slot="tip" class="el-upload__tip">请上传审批表图片</div>
                </el-upload>
            </el-form-item>

            <el-form-item label="附件" prop="attachment">
                <el-upload ref="attachmentUpload" :file-list="attachmentFileList"
                    :before-upload="beforeAttachmentUpload" :on-change="handleAttachmentFileChange" :auto-upload="false"
                    :on-remove="handleAttachmentRemove" :limit="1" list-type="text" action="#"
                    :http-request="handleAttachmentHttpRequest">
                    <el-button size="small" type="primary">点击上传</el-button>
                    <el-button v-if="form.attachment || temporaryAttachmentUrl" size="small" type="success"
                        icon="el-icon-download"
                        @click.stop="downloadAttachment(form.attachment || temporaryAttachmentUrl, getAttachmentFileName(form.attachment || temporaryAttachmentUrl))"
                        style="margin-left: 10px;">
                        下载附件
                    </el-button>
                    <div slot="tip" class="el-upload__tip">请上传附件文件</div>
                </el-upload>
            </el-form-item>

            <!-- 对分局隐藏 -->
            <el-form-item v-if="false" label="author对应的登录ip地址" prop="ip">
                <el-input v-model="form.ip" placeholder="请输入author对应的登录ip地址" />
            </el-form-item>
            <el-form-item v-if="false" label="审核日期" prop="pubdate">
                <el-date-picker clearable v-model="form.pubdate" type="date" value-format="yyyy-MM-dd"
                    placeholder="请选择审核日期">
                </el-date-picker>
            </el-form-item>
            <el-form-item v-if="false" label="0未审核1审核" prop="state">
                <el-select v-model="form.state" placeholder="请选择0未审核1审核">
                    <el-option v-for="dict in dict.type.check" :key="dict.value" :label="dict.label"
                        :value="dict.value"></el-option>
                </el-select>
            </el-form-item>
        </el-form>

        <!-- 按钮区域 -->
        <div class="form-buttons">
            <!-- 编辑草稿时显示更新草稿、直接发布按钮 -->
            <template v-if="isDraftMode">
                <el-button type="primary" @click="handleUpdateDraft" :loading="draftLoading" :disabled="isUploading">更新草稿</el-button>
                <el-button type="success" class="draft-publish-button" @click="handlePublishFromDraft" :loading="publishLoading" :disabled="isUploading">直接发布</el-button>
            </template>
            <!-- 编辑正式文章时显示确定、保存草稿按钮 -->
            <template v-else>
                <el-button type="primary" @click="submitForm" :loading="submitLoading" :disabled="isUploading">确 定</el-button>
                <el-button type="warning" class="draft-save-button" @click="handleSaveDraft" :loading="draftLoading" :disabled="isUploading">保存草稿</el-button>
            </template>
        </div>

    </div>
</template>

<script>
import { getUncheck, addUncheck, updateUncheck } from "@/api/uncheck/uncheck";
import { listConlumn, getConlumn, listConlumnListByRole } from "@/api/conlumn/conlumn";
import { addUncheckDraft, updateUncheckDraft, getUncheckDraft, publishUncheckDraft } from "@/api/uncheck/draft";
import { uploadUncheckFile, uploadUncheckAppval, uploadUncheckAttachment } from "@/api/uncheck/uncheck";
import imageCompression from "browser-image-compression";
import EnhancedEditor from "@/components/Editor/EnhancedEditor";
import Editor from "@/components/Editor";
import { getToken } from "@/utils/auth";

export default {
    name: "UncheckForm",
    dicts: ['check'],
    components: {
        EnhancedEditor,
        Editor
    },
    data() {
        this.rootImagePath = 'https://web-ya-40.oss-cn-hangzhou.aliyuncs.com/river/filePath'
        return {
            // 表单数据
            form: {
                articleId: null,
                title: null,
                articleOrigin: null,
                columnId: null,
                content: null,
                author: null,
                remark: null,
                ip: null,
                pubdate: null,
                state: null,
                littleTitle1: null,
                littleTitle2: null,
                coverPath: null,
                appval: null,
                attachment: null
            },
            // 表单验证规则
            rules: {
                title: [
                    { required: true, message: "标题不能为空", trigger: "blur" }
                ],
                articleOrigin: [
                    { required: true, message: "文章来源不能为空", trigger: "blur" }
                ],
                columnId: [
                    { required: true, message: "栏目名称不能为空", trigger: "change" }
                ],
                content: [
                    { required: true, message: "内容不能为空", trigger: "blur" }
                ],
                author: [
                    { required: true, message: "责任编辑不能为空", trigger: "blur" }
                ]
            },
            // 页面标题
            title: '新增文章',
            // 栏目选项
            columnOptions: [],
            // 副标题数组
            subtitles: [1],
            // 文件上传相关
            fileList: [],
            appvalFileList: [],
            attachmentFileList: [],
            temporaryAttachmentUrl: null,
            // 加载状态
            submitLoading: false,
            draftLoading: false,
            publishLoading: false, // 发布加载状态
            isUploading: false, // 附件上传状态
            // 文章来源和作者历史记录
            sourceHistory: [],
            authorHistory: [],
            // 用户信息
            userName: '',
            dept: '',
            canAdd: true
        };
    },
    computed: {
        // 判断当前选择的栏目是否为媒体聚焦
        isMediaFocusColumn() {
            if (!this.form.columnId || !this.columnOptions.length) {
                return false;
            }
            const selectedColumn = this.columnOptions.find(col => col.id === this.form.columnId);
            return selectedColumn && selectedColumn.name === '媒体聚焦';
        },
        // 判断当前是否为草稿模式
        isDraftMode() {
            return this.title === '修改草稿';
        }
    },
    created() {
        this.initPage();
    },
    watch: {
    // 监听路由变化，只在必要时重新初始化页面
    '$route'(to, from) {
      // 只有当路由路径真正改变且目标路径是审核页面时才重新初始化
      if (to.path !== from.path && to.path === '/uncheck/uncheck-form/index') {
        // 检查是否有文章ID参数
        const { id } = to.query;
        if (id && id !== this.$route.query.id) {
          this.initPage();
        }
      }
    }
    },
    methods: {
         // 初始化页面
         async initPage() {
             // 先清空表单状态
             this.reset();
             
             await this.getColumnList();
             await this.loadUserInfo();

             // 获取路由参数
             const { id, mode } = this.$route.query;

             if (id && mode === 'edit') {
                 this.title = '修改文章';
                 await this.loadArticleData(id);
             } else if (id && mode === 'draft') {
                 this.title = '修改草稿';
                 await this.loadDraftData(id);
             } else {
                 this.title = '新增文章';
                 this.form.articleOrigin = this.dept;
             }
         },

        // 加载用户信息
        loadUserInfo() {
            this.userName = this.$store.getters.name;
            this.dept = this.$store.getters.deptName;
            this.canAdd = this.$store.getters.roles.includes('admin') || this.$store.getters.roles.includes('city_admin');
        },

        // 加载文章数据
        async loadArticleData(id) {
            try {
                const response = await getUncheck(id);
                this.form = response.data;
                this.loadFileLists();
                this.loadSourceHistory();
                this.loadAuthorHistory();
            } catch (error) {
                this.$modal.msgError('加载文章数据失败');
            }
        },

        // 加载草稿数据
        async loadDraftData(id) {
            try {
                const response = await getUncheckDraft(id);
                this.form = response.data;
                this.loadFileLists();
                this.loadSourceHistory();
                this.loadAuthorHistory();
            } catch (error) {
                this.$modal.msgError('加载草稿数据失败');
            }
        },

        // 加载栏目列表
        async getColumnList() {
            try {
                const response = await listConlumnListByRole();
                this.columnOptions = response.rows;
            } catch (error) {
                this.$modal.msgError('加载栏目列表失败');
            }
        },

        // 加载文件列表
        loadFileLists() {
            // 加载封面文件
            if (this.form.coverPath) {
                this.fileList = [{
                    name: 'cover.jpg',
                    // url: this.rootImagePath + this.form.coverPath
                    url: this.rootImagePath + this.form.coverPath
                }];
            }

            // 加载审批表文件
            if (this.form.appval) {
                this.appvalFileList = [{
                    name: 'appval.jpg',
                    // url: this.rootImagePath + this.form.appval
                    url: this.rootImagePath + this.form.appval
                }];
            }

            // 加载附件文件
            if (this.form.attachment) {
                this.attachmentFileList = [{
                    name: this.getAttachmentFileName(this.form.attachment),
                    // url: this.rootImagePath + this.form.attachment
                    url: this.rootImagePath + this.form.attachment
                }];
            }
        },

        // 加载文章来源历史记录
        loadSourceHistory() {
            const saved = localStorage.getItem('sourceHistory');
            if (saved) {
                this.sourceHistory = JSON.parse(saved);
            }
        },

        // 加载作者历史记录
        loadAuthorHistory() {
            const saved = localStorage.getItem('authorHistory');
            if (saved) {
                this.authorHistory = JSON.parse(saved);
            }
        },

        // 保存文章来源历史记录
        saveSourceHistory(source) {
            if (!source || this.sourceHistory.includes(source)) return;

            this.sourceHistory.unshift(source);
            if (this.sourceHistory.length > 10) {
                this.sourceHistory = this.sourceHistory.slice(0, 10);
            }
            localStorage.setItem('sourceHistory', JSON.stringify(this.sourceHistory));
        },

        // 保存作者历史记录
        saveAuthorHistory(author) {
            if (!author || this.authorHistory.includes(author)) return;

            this.authorHistory.unshift(author);
            if (this.authorHistory.length > 10) {
                this.authorHistory = this.authorHistory.slice(0, 10);
            }
            localStorage.setItem('authorHistory', JSON.stringify(this.authorHistory));
        },

        // 文章来源自动完成
        querySearchSource(queryString, cb) {
            const results = this.sourceHistory.filter(item =>
                item.toLowerCase().includes(queryString.toLowerCase())
            );
            cb(results);
        },

        // 作者自动完成
        querySearchAuthor(queryString, cb) {
            const results = this.authorHistory.filter(item =>
                item.toLowerCase().includes(queryString.toLowerCase())
            );
            cb(results);
        },

        // 栏目变化处理
        handleColumnChange() {
            // 栏目变化时的处理逻辑
        },

        // 添加副标题
        addSubtitle() {
            if (this.subtitles.length < 2) {
                this.subtitles.push(this.subtitles.length + 1);
            }
        },

        // 文件上传前验证
        beforeUpload(file) {
            const isImage = file.type.startsWith('image/');
            const isLt10M = file.size / 1024 / 1024 < 10;

            if (!isImage) {
                this.$modal.msgError('上传文件只能是图片格式!');
                return false;
            }
            if (!isLt10M) {
                this.$modal.msgError('上传图片大小不能超过 10MB!');
                return false;
            }
            return true;
        },

        // 审批表上传前验证
        beforeAppvalUpload(file) {
            const isImage = file.type.startsWith('image/');
            const isLt10M = file.size / 1024 / 1024 < 10;

            if (!isImage) {
                this.$modal.msgError('上传文件只能是图片格式!');
                return false;
            }
            if (!isLt10M) {
                this.$modal.msgError('上传图片大小不能超过 10MB!');
                return false;
            }
            return true;
        },

        // 附件上传前验证
        beforeAttachmentUpload(file) {
            const isLt50M = file.size / 1024 / 1024 < 50;
            if (!isLt50M) {
                this.$modal.msgError('上传文件大小不能超过 50MB!');
                return false;
            }
            return true;
        },

        // 文件变化处理
        handleFileChange(file, fileList) {
            this.fileList = fileList;
        },

        // 审批表文件变化处理
        handleAppvalFileChange(file, fileList) {
            this.appvalFileList = fileList;
        },

        // 附件文件变化处理
        handleAttachmentFileChange(file, fileList) {
            this.attachmentFileList = fileList;
        },

        // 移除文件
        handleRemove(file, fileList) {
            this.fileList = fileList;
            this.form.coverPath = null;
        },

        // 移除审批表文件
        handleAppvalRemove(file, fileList) {
            this.appvalFileList = fileList;
            this.form.appval = null;
        },

        // 移除附件文件
        handleAttachmentRemove(file, fileList) {
            this.attachmentFileList = fileList;
            this.form.attachment = null;
            this.temporaryAttachmentUrl = null;
        },

        // 文件上传请求
        async handleHttpRequest(options) {
            try {
                const formData = new FormData();
                formData.append('file', options.file);

                const response = await uploadUncheckFile(formData);
                this.form.coverPath = response.data.fileName;
                this.$modal.msgSuccess('封面上传成功');
            } catch (error) {
                this.$modal.msgError('封面上传失败');
            }
        },

        // 审批表上传请求
        async handleAppvalHttpRequest(options) {
            try {
                const formData = new FormData();
                formData.append('file', options.file);

                const response = await uploadUncheckAppval(formData);
                this.form.appval = response.data.fileName;
                this.$modal.msgSuccess('审批表上传成功');
            } catch (error) {
                this.$modal.msgError('审批表上传失败');
            }
        },

        // 附件上传请求
        async handleAttachmentHttpRequest(options) {
            this.isUploading = true;
            try {
                const formData = new FormData();
                formData.append('file', options.file);

                const response = await uploadUncheckAttachment(formData);
                this.form.attachment = response.data.fileName;
                this.temporaryAttachmentUrl = response.data.fileName;
                this.$modal.msgSuccess('附件上传成功');
            } catch (error) {
                this.$modal.msgError('附件上传失败');
            } finally {
                this.isUploading = false;
            }
        },

        // 下载附件
        downloadAttachment(url, filename) {
            const link = document.createElement('a');
            link.href = this.rootImagePath + url;
            link.download = filename;
            link.click();
        },

        // 获取附件文件名
        getAttachmentFileName(url) {
            if (!url) return '';
            const parts = url.split('/');
            return parts[parts.length - 1];
        },

        // 验证封面
        validateCover() {
            if (this.isMediaFocusColumn) {
                if (!this.form.coverPath && (!this.fileList || this.fileList.length === 0)) {
                    this.$modal.msgError('媒体聚焦栏目必须上传封面图片');
                    return false;
                }

                if (this.fileList && this.fileList.length > 0) {
                    const file = this.fileList[0];
                    if (file.size < 1024 * 1024) { // 1MB
                        this.$modal.msgError('封面图片大小不能小于1MB');
                        return false;
                    }
                }
            }
            return true;
        },

        // 提交表单
        async submitForm() {
            if (!this.validateCover()) {
                return;
            }

            this.$refs["form"].validate(async valid => {
                if (!valid) return;

                this.submitLoading = true;
                try {
                    // 同步文件数据到表单
                    await this.syncFileData();

                    // 保存历史记录
                    this.saveSourceHistory(this.form.articleOrigin);
                    this.saveAuthorHistory(this.form.author);

                     if (this.form.articleId != null) {
                         await updateUncheck(this.form);
                         this.$modal.msgSuccess("修改成功");
                     } else {
                         await addUncheck(this.form);
                         this.$modal.msgSuccess("新增成功");
                     }

                     // 清空表单
                     this.reset();
                     this.goBack();
                } catch (error) {
                    this.$modal.msgError('操作失败');
                } finally {
                    this.submitLoading = false;
                }
            });
        },

        // 保存草稿
        async handleSaveDraft() {
            if (!this.validateCover()) {
                return;
            }

            this.$refs["form"].validate(async valid => {
                if (!valid) return;

                this.draftLoading = true;
                try {
                    // 同步文件数据到表单
                    await this.syncFileData();

                    // 保存历史记录
                    this.saveSourceHistory(this.form.articleOrigin);
                    this.saveAuthorHistory(this.form.author);

                     if (this.form.articleId != null) {
                         await updateUncheckDraft(this.form);
                         this.$modal.msgSuccess("草稿更新成功");
                     } else {
                         await addUncheckDraft(this.form);
                         this.$modal.msgSuccess("草稿保存成功");
                     }

                     // 清空表单
                     this.reset();
                     this.goBack();
                } catch (error) {
                    this.$modal.msgError('保存草稿失败');
                } finally {
                    this.draftLoading = false;
                }
            });
        },

        // 更新草稿（草稿模式下的保存草稿）
        async handleUpdateDraft() {
            if (!this.validateCover()) {
                return;
            }

            this.$refs["form"].validate(async valid => {
                if (!valid) return;

                this.draftLoading = true;
                try {
                    // 同步文件数据到表单
                    await this.syncFileData();

                    // 保存历史记录
                    this.saveSourceHistory(this.form.articleOrigin);
                    this.saveAuthorHistory(this.form.author);

                    // 更新草稿
                    await updateUncheckDraft(this.form);
                    this.$modal.msgSuccess("草稿更新成功");

                    // 返回上一页
                    this.goBack();
                } catch (error) {
                    this.$modal.msgError('更新草稿失败');
                } finally {
                    this.draftLoading = false;
                }
            });
        },

        // 从草稿直接发布
        async handlePublishFromDraft() {
            if (!this.validateCover()) {
                return;
            }

            // 检查是否上传了审批表
            if (!this.form.appval || this.form.appval === '') {
                this.$modal.msgError("请上传审批表后再发布");
                return;
            }

            this.$refs["form"].validate(async valid => {
                if (!valid) return;

                this.publishLoading = true;
                try {
                    // 同步文件数据到表单
                    await this.syncFileData();

                    // 保存历史记录
                    this.saveSourceHistory(this.form.articleOrigin);
                    this.saveAuthorHistory(this.form.author);

                    // 先更新草稿，确保数据是最新的
                    await updateUncheckDraft(this.form);

                    // 发布草稿
                    const response = await publishUncheckDraft(this.form.articleId);
                    if (response && response.code === 200) {
                        this.$modal.msgSuccess("发布成功");
                        this.goBack();
                    } else {
                        throw new Error(response.msg || "发布失败");
                    }
                } catch (error) {
                    this.$modal.msgError(`发布失败: ${error.message}`);
                } finally {
                    this.publishLoading = false;
                }
            });
        },

        // 同步文件数据到表单
        async syncFileData() {
            // 确保封面图片数据同步
            if (this.fileList && this.fileList.length > 0 && !this.form.coverPath) {
                const file = this.fileList[0];
                if (file.raw) {
                    // 如果有新上传的文件但还没有保存到form中，需要上传
                    await this.uploadCoverFile(file.raw);
                } else if (file.url) {
                    // 如果是从URL加载的文件，直接设置
                    this.form.coverPath = file.url.replace(this.rootImagePath, '');
                }
            }

            // 确保审批表数据同步
            if (this.appvalFileList && this.appvalFileList.length > 0 && !this.form.appval) {
                const file = this.appvalFileList[0];
                if (file.raw) {
                    // 如果有新上传的文件但还没有保存到form中，需要上传
                    await this.uploadAppvalFile(file.raw);
                } else if (file.url) {
                    // 如果是从URL加载的文件，直接设置
                    this.form.appval = file.url.replace(this.rootImagePath, '');
                }
            }

            // 确保附件数据同步
            if (this.attachmentFileList && this.attachmentFileList.length > 0 && !this.form.attachment) {
                const file = this.attachmentFileList[0];
                if (file.raw) {
                    // 如果有新上传的文件但还没有保存到form中，需要上传
                    await this.uploadAttachmentFile(file.raw);
                } else if (file.url) {
                    // 如果是从URL加载的文件，直接设置
                    this.form.attachment = file.url.replace(this.rootImagePath, '');
                }
            }
        },

        // 上传封面文件
        async uploadCoverFile(file) {
            try {
                const formData = new FormData();
                formData.append('file', file);
                const response = await uploadUncheckFile(formData);
                this.form.coverPath = response.data.fileName;
            } catch (error) {
                console.error('封面上传失败:', error);
                throw error;
            }
        },

        // 上传审批表文件
        async uploadAppvalFile(file) {
            try {
                const formData = new FormData();
                formData.append('file', file);
                const response = await uploadUncheckAppval(formData);
                this.form.appval = response.data.fileName;
            } catch (error) {
                console.error('审批表上传失败:', error);
                throw error;
            }
        },

        // 上传附件文件
        async uploadAttachmentFile(file) {
            try {
                const formData = new FormData();
                formData.append('file', file);
                const response = await uploadUncheckAttachment(formData);
                this.form.attachment = response.data.fileName;
            } catch (error) {
                console.error('附件上传失败:', error);
                throw error;
            }
        },

        // 返回上一页
        goBack() {
            this.$router.go(-1);
        },

         // 表单重置
         reset() {
             this.form = {
                 articleId: null,
                 title: null,
                 articleOrigin: null,
                 columnId: null,
                 content: null,
                 author: null,
                 remark: null,
                 ip: null,
                 pubdate: null,
                 state: null,
                 littleTitle1: null,
                 littleTitle2: null,
                 coverPath: null,
                 appval: null,
                 attachment: null
             };
             this.fileList = [];
             this.appvalFileList = [];
             this.attachmentFileList = [];
             this.temporaryAttachmentUrl = null;
             this.subtitles = [1];
             
             // 清空上传状态
             this.isUploading = false;
             this.submitLoading = false;
             this.draftLoading = false;
             
             // 重置表单验证状态
             if (this.$refs.form) {
                 this.$refs.form.clearValidate();
             }
             
             // 清空上传组件的文件列表
             this.$nextTick(() => {
                 if (this.$refs.upload) {
                     this.$refs.upload.clearFiles();
                 }
                 if (this.$refs.appvalUpload) {
                     this.$refs.appvalUpload.clearFiles();
                 }
                 if (this.$refs.attachmentUpload) {
                     this.$refs.attachmentUpload.clearFiles();
                 }
             });
         }
    }
};
</script>

<style scoped>
.box-card {
    margin: 20px;
}

.clearfix:before,
.clearfix:after {
    display: table;
    content: "";
}

.clearfix:after {
    clear: both;
}

.subtitle-item {
    margin-bottom: 10px;
}

.el-upload__tip {
    color: #606266;
    font-size: 12px;
    margin-top: 7px;
}

.form-buttons {
    text-align: center;
    padding: 20px 0;
    border-top: 1px solid #ebeef5;
    margin-top: 20px;
}

.form-buttons .el-button {
    margin: 0 10px;
    min-width: 100px;
}

.draft-save-button {
    margin-left: 10px;
}

.draft-publish-button {
    margin-left: 10px;
    font-weight: bold;
    border-radius: 4px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.draft-publish-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
</style>
